<import file="block/common.html" name="url" :tpl_cfg="['urlName'=>$title,'backList'=>'返回列表']"/>
<div class="layui-fluid">
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label required">专题名称</label>
            <div class=" layui-col-md4 layui-input-black">
                <input type="text" name="name" lay-verify="required" lay-reqtext="专题名称不能为空" placeholder="请输入专题名称"
                    value="<{$info['name']??''}>" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">链接地址</label>
            <div class=" layui-col-md4 layui-input-black">
                <input type="text" name="url" lay-verify="required" lay-reqtext="链接不能为空" placeholder="请输入链接"
                    value="<{$info['url']??''}>" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">格式如： /list/2 </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">图标</label>
            <div class="layui-input-inline" style="width:300px;">
               <input type="text" class="icoSelect" placeholder="选择图标" name="ico" value="<{$info['ico']??''}>" lay-verify="required" lay-reqtext="图标不能为空">
            </div> <span class="layui-form-mid layui-word-aux" id="iconame"><{$info['ico']??''}></span>
            <div class="layui-form-mid layui-word-aux">一般用于调用列表时调用</div>
        </div> 
        
        <fieldset class="layui-elem-field" style="margin-top:10px;padding-top: 10px;">
            <div class="layui-form-item">
                <label class="layui-form-label required">链接图片1</label>
                <div class="layui-input-inline" style="width:420px;" id="pre_a_img">
                    <?php if(!empty($info['img_a'])){ ?>
                        <img src="<{$info['img_a']??''}>" width="220" height="80"  >
                    <?php }else{ ?>
                        <i class="layui-icon layui-icon-picture" style="font-size: 80px; color: #1E9FFF;"></i>
                    <?php } ?>   
                </div>
            </div>
    
            <div class="layui-form-item">
                <label class="layui-form-label required"></label>
                <div class="layui-input-inline" style="width:520px;">
                    <?php if(SysRolCk("upload_upload")){ ?>
                    <input type="text" id="special_a_img" name="img_a" value="<{$info['img_a']??''}>" class="layui-input" lay-verify="required" lay-reqtext="链接图片1不能为空">
                    <button class="layui-btn uploadimg" lay-data="{id:'special_a_img',preid:'pre_a_img',img:'<{$info['img_a']??''}>'}"> <i class="layui-icon">&#xe67c;</i>上传banner</button>
                    <?php } ?>
                </div>
                <div class="layui-form-mid layui-word-aux">150X80px 上传不超过 100kb，显示在首页下方专题链接列表处！</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label required">链接图片2</label>
                <div class="layui-input-inline" style="width:420px;" id="pre_b_img">
                    <?php if(!empty($info['img_b'])){ ?>
                        <img src="<{$info['img_b']??''}>" width="1140" height="150"  >
                    <?php }else{ ?>
                        <i class="layui-icon layui-icon-picture" style="font-size: 80px; color: #1E9FFF;"></i>
                    <?php } ?>   
                </div>
            </div>
    
            <div class="layui-form-item">
                <label class="layui-form-label required"></label>
                <div class="layui-input-inline" style="width:520px;">
                    <?php if(SysRolCk("upload_upload")){ ?>
                    <input type="text" id="special_b_img" name="img_b" value="<{$info['img_b']??''}>" class="layui-input">
                    <button class="layui-btn uploadimg" lay-data="{id:'special_b_img',preid:'pre_b_img',img:'<{$info['img_b']??''}>'}"> <i class="layui-icon">&#xe67c;</i>上传banner</button>
                    <?php } ?>
                </div>
                <div class="layui-form-mid layui-word-aux">1140X150px 上传不超过 900kb，用于横幅显示！内容页列表页会显示最新的专题链接图片2</div>
            </div>


        <div class="layui-form-item">
            <label class="layui-form-label required">链接图片3</label>
            <div class="layui-input-inline" style="width:420px;" id="pre_c_img">
                <?php if(!empty($info['img_c'])){ ?>
                    <img src="<{$info['img_c']??''}>" width="220" height="80"  >
                <?php }else{ ?>
                    <i class="layui-icon layui-icon-picture" style="font-size: 80px; color: #1E9FFF;"></i>
                <?php } ?>   
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required"></label>
            <div class="layui-input-inline" style="width:520px;">
                <?php if(SysRolCk("upload_upload")){ ?>
                <input type="text" id="special_c_img" name="img_c" value="<{$info['img_c']??''}>" class="layui-input">
                <button class="layui-btn uploadimg" lay-data="{id:'special_c_img',preid:'pre_c_img',img:'<{$info['img_c']??''}>'}"> <i class="layui-icon">&#xe67c;</i>上传banner</button>
                <?php } ?>
            </div>
            <div class="layui-form-mid layui-word-aux">定制图片链接显示，自行制作模板时调用，如制作专题频道页！</div>
        </div>


    </fieldset>

    <div class="layui-form-item">
        <label class="layui-form-label required">首页显示</label>
        <div class="layui-input-black">
            <input type="radio" name="area" value="0" title="不显示" <?php echo $info['area']==0 ?'checked':'';?>>
            <input type="radio" name="area" value="1" title="头部" <?php echo $info['area']==1 ?'checked':'';?>>
            <input type="radio" name="area" value="2" title="中部" <?php echo $info['area']==2 ?'checked':'';?>>
            <input type="radio" name="area" value="3" title="下部" <?php echo $info['area']==3 ?'checked':'';?>>
          </div>
        <div class="layui-form-mid layui-word-aux">首页三个位置显示链接,调用的图片是以上 “专题链接图片2”，专题链接总列表不受此控制</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">显示控制</label>
        <div class="layui-input-inline">
          <input type="radio" name="status" value="1" title="显示" <?php if(!empty($info) && $info["status"] ==1){ echo 'checked=""';} ?>>
          <input type="radio" name="status" value="0" title="禁用" <?php if(!empty($info) && $info["status"] ==0){ echo 'checked=""';} ?>>
        </div>
    </div>


		<div class="layui-form-item">
            <label class="layui-form-label required">排序</label>
            <div class="layui-input-inline">
                <input type="text" name="sort" lay-verify="required" lay-reqtext="排序数字不能为空" placeholder="请输入排序数字"
                    value="<{$info['sort']??''}>" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="hidden" name="id" value="<{$info['id']??''}>">
                <button class="layui-btn" lay-submit lay-filter="saveBtn"><i class="layui-icon">&#x1005;</i><?php echo lang('save');?></button>
            </div>
        </div>
    </div>
</div>
<script>
    layui.define(["iconSelected"],function () {
        var form = layui.form,layer = layui.layer,$ = layui.$,upload = layui.upload,iconSelected = layui.iconSelected;
        form.render();

        iconSelected.render(".icoSelect", {
            event: {
                select(event, data) {
                    $('#iconame').text(data.icon);
                    //console.log("选中的图标数据", { event, data });
                },
            },
        });

        var uploadInst = upload.render({
			elem: '.uploadimg' //绑定元素
			,url: '<{CAUrl("upload","upload")}>&nothumb' //图片上传接口 /admin.php?c=upload&a=upload
			,size: 1000
			,accept:'images'
			,acceptMime: 'image/*'
			,acceptMime: 'image/jpg, image/png,image/jpeg'
			,done: function(res){
				if(res.status == 1){
                    $.post("<{CAUrl('upload','upload')}>&del", { url: this.img});//删除旧文件
					$('#'+this.id).val(res.result[0].src);
                    $('#'+this.preid).html('<img src="'+res.result[0].src+'" width="220" height="80">');
					layer.msg(res.info);
				}else{
					layer.msg(res.info);
				}
			}
		});

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            $.post('<{CAUrl("contentspecial",ROUTE["act"])}>', data.field, function (res) {
                if (res.status == 1) {
                    layer.msg(res.info, { icon: 1, time: 1000 }, function () {
                        loadMain('<{CAUrl("contentspecial","index")}>');
                    });
                } else {
                    layer.msg(res.info, { icon: 2, anim: 6, time: 5000 });
                }
            });
            return false;
        });

    });
</script>